<template>
	<view class="task-wrap">
		<u-navbar back-text="我的" title="仪器使用" :custom-back="gotabpolice"></u-navbar>
		<view class="clomn-wrap" style="position: relative;">
			<view class="imageD" style="margin: 10px;">
				<image style="width: 100%; height: 100%;border-radius: 10rpx;"
					:src=" 'https://www.huancelian.com/azImg/' + image "></image>
			</view>
			<view class="tabContainer" style="margin-bottom: 2rpx;">
				<!-- 仪器信息 -->
				<view class="project-info">
					<view class="sample-detail">
						<text class="title">仪器名称</text>
						<text class="value">{{datainfo.name ||""}}</text>
					</view>
					<!-- 分割线 -->
					<view class="divLine"></view>

					<view class="sample-detail">
						<text class="title">仪器编号</text>
						<text class="value">{{datainfo.number ||""}}</text>
					</view>
					<!-- 分割线 -->
					<view class="divLine"></view>

					<view class="sample-detail" @click="taskNumber">
						<text class="title">任务单号</text>
						<text class="value" arrow="false">{{datainfo.jobId || jobId ||""}}</text>
					</view>
					<!-- 分割线 -->
					<view class="divLine"></view>

					<view class="sample-detail" @click="taskNumber1">
						<text class="title">附属仪器</text>
						<text class="value">{{datainfo.subDevice ||subDevice||""}}</text>
					</view>
					<!-- 分割线 -->
					<view class="divLine"></view>

					<view class="sample-detail">
						<text class="title">开机时间</text>
						<text class="value">{{datainfo.start ||""}}</text>
					</view>
				</view>
			</view>
			<view class="tabContainer" style="margin-bottom: 2px;">
				<!-- 仪器信息 -->
				<view class="project-info">
					<view class="sample-detail">
						<text class="title">使用时长</text>
						<text class="value">{{datainfo.duration ||""}}</text>
					</view>
				</view>
			</view>
			<view style="display: flex" v-if="isLogin">
				<button class="button_login" @click="maintenance">保养登记</button>
				<view style="display: flex">
					<button class="button_login_1" :disabled="repair1" @click="repair">开始使用</button>
					<button class="button_login_2" :disabled="repairData2" @click="repairData">结束使用</button>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14" width="600rpx" height="150px">
			<view class="sample-detail1">
				<text class="title">使用后仪器状况</text>
				<radio-group @change="chan">
					<label>
						<radio :value="'1'" checked="checked" />正常
						<radio :value="'2'" />异常
					</label>
				</radio-group>
			</view>
			<view style="display: flex; margin-top: 50px;">
				<button class="button_login_4" @click="repairData1">取消</button>
				<button class="button_login_3" @click="confirm">确认</button>
			</view>
		</u-popup>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				isLogin: true,
				datainfo: {
					deviceId: "",
					subDevice: "",
					jobId: "",
					projectName: "",
				},
				imageHTTPS: "https://www.huancelian.com/azImg/",
				image: "",
				jobId: "",
				projectName: "",
				subDevice: "",
				datainfoData: {},
				scanTheCode:"",
				show: false,
				checked: false,
				isIntactData: {
					isIntact: "1",
					id: ""
				},
				deviceId: "",
				repair1: false,
				repairData2: false,
				empName: "",
			}
		},
		mounted() {
			this.detail()
		},
		onLoad(option) {
			console.log(option)
			this.empName = option.empName
			this.isIntactData.id = option.id
			this.deviceId = option.id
			this.jobId = option.jobId
			this.projectName = option.projectName
			console.log("任务单号[id]", this.jobId)
			console.log("选择的任务单号[名称]", this.projectName)
			this.subDevice = option.number
			console.log("附属仪器", this.subDevice)
			this.scanTheCode = option.scanTheCode
		},
		methods: {
			detail() {
				console.log(11)
				this.$api.detail({
					id: this.deviceId
				}, res => {
					if (res.code === 200) {
						this.datainfo = res.result || {}
						console.log("列表", this.datainfo)
						this.isIntactData.id = this.datainfo.useId
						this.image = this.datainfo.image1
						if (this.datainfo.isOn === 0) {
							this.repairData2 = true
							this.repair1 = false
						}
						if (this.datainfo.isOn === 1) {
							this.repair1 = true
							this.repairData2 = false
						}
						if (this.datainfo.type !== 3 || this.datainfo.type !== 5 && this.datainfo.edit !== 1) {
							this.isLogin = true
						}
					}
				})
				// this.$api.subDevice({
				// 	deviceId: this.deviceId
				// }, res => {
				// 	console.log(res)
				// 	if (res.code === 200) {
				// 		this.datainfoData = res.result[0] || {}
				// 		this.datainfo.subDevice = this.datainfoData.id
				// 		console.log("附属仪器", this.datainfo.subDevice)
				// 	}
				// })
			},
			maintenance() {
				wx.navigateTo({
					url: '/pages/maintenance/maintenanceAcceptance/maintenanceAcceptance?id=' + this.deviceId +
						"&empName=" + this.empName
				})
			},
			repair() {
				this.$api.useDevice({
					deviceId: this.datainfo.id,
					subDevice: this.subDevice,
					jobId: this.jobId,
					projectName: this.projectName
				}, res => {
					if (res.code === 200) {
						this.$common.successToShow("开启成功")
						this.repair1 = true
						this.repairData2 = false
						this.detail()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
						this.commitLoading = false
					}
				})
			},
			repairData() {
				this.show = true
			},
			repairData1() {
				this.show = false
			},
			chan(e) {
				this.activeRadio = e.detail.value;
				//this.activeRadio存的是选中的Value的值
				this.isIntactData.isIntact = this.activeRadio
				console.log(this.isIntactData.isIntact);
			},
			confirm() {
				this.$api.stopDevice(this.isIntactData, res => {
					console.log(6666);
					if (res.code === 200) {
						this.$common.successToShow("提交成功")
						this.show = false
						this.repairData2 = true
						this.repair1 = false
						this.detail()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
						this.show = false
					}
				})
			},
			taskNumber() {
				wx.navigateTo({
					url: '/pages/maintenance/theTaskNumber/theTaskNumber?id=' + this.deviceId + '&jobId=' + this
						.jobId + '&projectName=' + this
						.projectName,
				})
			},
			taskNumber1() {
				wx.navigateTo({
					url: '/pages/maintenance/attachedInstrument/attachedInstrument?id=' + this.deviceId +
						'&jobId=' + this.jobId + '&projectName=' + this
						.projectName,
				})
			},
			gotabpolice() {
				wx.reLaunch({
					url: '/pages/mine/index?id=' + this.deviceId + "&scanTheCode=" + this.scanTheCode
				})
			},
		}
	}
</script>

<style scoped>
	.imageD {
		width: 712rpx;
		height: 712rpx;
		display: inline-block;
		box-sizing: border-box;
		left: 0rpx;
		top: 0rpx;
		position: relative
	}

	.tabContainer {
		overflow-x: hidden;
		width: 100%;
		/* height: 100%; */
		padding-bottom: 15rpx;
		padding-left: 27rpx;
		padding-right: 20rpx;
	}

	.project-info {
		/* height: 280rpx; */
		width: calc(100%-98rpx);
		background-color: #ffffff;
		margin-top: 20rpx;
		padding-top: 5rpx;
		padding-right: 49rpx;
		padding-bottom: 20rpx;
		border-radius: 19rpx;
	}

	.sample-detail {
		margin-top: 10rpx;
		font-size: 25rpx;
		height: 40rpx;
		display: flex;
		align-items: center;

	}

	.sample-detail .title {
		color: #2E2E2E;
		font-weight: bolder;
		opacity: 0.8;
		display: inline-block;
		width: 250rpx;
		padding-left: 30rpx;
	}

	.sample-detail .value {
		color: #555555;
		font-weight: 400;
		opacity: 0.7;
		width: 65%;
		display: inline-block;
		padding-left: 150rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.sample-detail1 {
		margin-top: 10rpx;
		font-size: 25rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
	}

	.sample-detail1 .title {
		color: #2E2E2E;
		font-weight: bolder;
		opacity: 0.8;
		display: inline-block;
		width: 250rpx;
		padding-left: 40rpx;
	}

	.sample-detail1 .value1 {
		color: #555555;
		font-weight: 400;
		opacity: 0.7;
		width: 30%;
		display: inline-block;
		padding-left: 180rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/*分割线样式*/
	.divLine {
		background: #eff1e9;
		width: 100%;
		height: 1rpx;
		margin: 20rpx;
	}

	.button_login {
		margin-left: 30rpx;
		margin-top: 10rpx;
		display: block;
		width: 170rpx;
		height: 60rpx;
		padding-left: 30rpx;
		padding-top: 0rpx;
		font-size: 25rpx;
		background-color: #193566;
		color: #fff;
		letter-spacing: 1rpx;
	}

	.button_login_1 {
		margin-top: 10rpx;
		display: block;
		width: 170rpx;
		height: 60rpx;
		padding-left: 30rpx;
		padding-top: 0rpx;
		font-size: 25rpx;
		background-color: #00aa00;
		color: #fff;
		letter-spacing: 1rpx;
	}

	.button_login_2 {
		margin: 10rpx 20rpx 10rpx 10rpx;
		display: block;
		width: 170rpx;
		height: 60rpx;
		padding-left: 30rpx;
		padding-top: 0rpx;
		font-size: 25rpx;
		background-color: #ff0000;
		color: #ffff;
		letter-spacing: 1rpx;
	}

	.button_login_3 {
		margin: 10rpx 20rpx 10rpx 10rpx;
		display: block;
		width: 272rpx;
		height: 60rpx;
		padding-left: 30rpx;
		padding-top: 0rpx;
		font-size: 25rpx;
		background-color: #2F3A89;
		color: #ffff;
		letter-spacing: 1rpx;
	}

	.button_login_4 {
		margin: 10rpx 20rpx 10rpx 15rpx;
		display: block;
		width: 272rpx;
		height: 60rpx;
		padding-left: 30rpx;
		padding-top: 0rpx;
		font-size: 25rpx;
		background-color: #D3DDF9;
		color: #ffff;
		letter-spacing: 1rpx;
	}
</style>